<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>flybird</title>
        <style media="screen">
            canvas {
                border: 1px black solid;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .debug {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 620px;
            }

            .debug div {
                margin-left: 300px;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                cursor: default;
                top: 0;
                height: 18px;
                width: 18px;
                background: #fff;
                border-radius: 50%;
                border: 3px solid #006eb3;
            }

            input[type="range"] {
                -webkit-appearance: none;
                background-color: #c3c9c9;
                border-radius: 15px;
                height: 4px;
                padding: 0;
                border: none;
                outline: none;
            }
        </style>
        <script src='game/utils.js'></script>
        <script src='game/config.js'></script>
        <script src='model/basic_model.js'></script>
        <script src='game/game.js'></script>
        <script src='model/score.js'></script>
        <script src='model/bird.js'></script>
        <script src='model/lawn.js'></script>
        <script src='model/pipe.js'></script>
        <script src='scene/scene_start.js'></script>
        <script src='scene/scene_main.js'></script>
    </head>
    <body>
        <canvas id="id-canvas" width="342" height="479"></canvas>
        <div class="debug"></div>
        <script src=game/main.js></script>
    </body>
</html>
